<!-- 新增与编辑供应商 -->
<template>
  <el-dialog :title="modalData.title" :visible.sync="dialog.show" center width="530px" height="400px" custom-class="mydialog" append-to-body @close="handleClose">
    <div class="dialog-content">
      <el-form ref="formSupplier" :model="form" :rules="rules" label-width="150px" >
        <el-form-item label="供应商名称：" prop="supplierName">
          <el-input v-model="form.supplierName" maxlength="50"/>
        </el-form-item>
        <el-form-item label="联系人：" prop="contactName">
          <el-input v-model="form.contactName" maxlength="50"/>
        </el-form-item>
        <el-form-item label="电话：" prop="phone">
          <el-input v-model="form.phone" maxlength="50"/>
        </el-form-item>
        <el-form-item label="类别：" prop="supplierTypeItme">
          <el-select v-model="form.supplierTypeItme" value-key="value" placeholder="选择类别" class="seach-select" size="small">
            <el-option v-for="item in supplierTypeList " :key="item.value" :label="item.label" :value="item"/>
          </el-select>
        </el-form-item>
        <el-form-item label="备注：" >
          <el-input v-model="form.remarks" maxlength="50"/>
        </el-form-item>
      </el-form>
      <div class="text-center mt-30">
        <el-button class="greenbt bt-wd" type="primary" @click="saveFun('formSupplier')">保存</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import {
  post
} from '@/api/utils'
import { checkPhone } from '@/utils/utils'
export default{
  props: {
    modalStaticData: {
      type: Object,
      default: () => {}
    },
    // 父组件调用时传进来的参数
    modalData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    var phoneValidate = (rule, value, callback) => {
      checkPhone(value) ? callback() : callback(new Error('请输入正确的手机号'))
    }

    return {
      dialog: {
        title: '', show: true
      },
      form: {
        type_options: [], type: ''
        //, supplierTypeItme:null
      },
      rules: {
        supplierName: [
          { required: true, message: '请输入供应商名称', trigger: 'blur' },
          { max: 50, message: '长度在 50 个字符内', trigger: 'blur' }
        ],
        contactName: [
          { required: true, message: '请输入联系人名称', trigger: 'blur' },
          { max: 50, message: '长度在 50 个字符内', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号名称', trigger: 'blur' },
          { max: 50, message: '长度在 50 个字符内', trigger: 'blur' },
          { validator: phoneValidate, trigger: 'blur' }
        ],
        supplierTypeItme: [
          { required: true, message: '请选择出货方式', trigger: 'change' }
        ]

      },
      supplierTypeList: [{ label: '商城供应商', value: 1 }, { label: '网批供应商', value: 2 }]

    }
  },
  created: function() {
    if (this.modalData.supplier) {
      var row = this.modalData.supplier
      this.form.supplierName = row.supplierName

      // this.form.supplierTypeItme = { value: row.supplierType+"" }
      console.log(row.supplierType)
      this.supplierTypeList.forEach((itme) => {
        console.log(itme)
        if (itme && itme.value + '' === row.supplierType) {
          this.form.supplierTypeItme = { value: itme.value, label: itme.label }
        }
      })

      this.form.contactName = row.contactName
      this.form.phone = row.phone
      this.form.remarks = row.remarks

      this.form = Object.assign({}, this.form, {})
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },

    saveFun(formName) {
      const self = this
      // console.log(formName)
      // console.log(self.$refs[formName])
      self.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(valid)
          var form = this.form

          var data = { 'supplierName': form.supplierName, 'contactName': form.contactName, 'phone': form.phone, 'supplierType': form.supplierTypeItme.value, 'remarks': form.remarks }

          var url = '/pas/supplier/add'
          if (this.modalData.supplier && this.modalData.supplier.supplierId && this.modalData.supplier.supplierId > 0) {
            data.supplierId = this.modalData.supplier.supplierId
            url = '/pas/supplier/update'
          }

          post('/wxh-cloud-rest/rest/', url, data).then(response => {
            if (response.data.status === 'success') {
              console.log(response)
              this.$message({
                message: '编辑供应商成功'
              })
              console.log(1111111111)
              this.modalStaticData.closeChildAndRefresh()
            } else if (response.data.status === 'token_check_faild') {
              this.$message({
                message: response.data.messge,
                type: 'warning'
              })
            }
          }).catch(error => {
            console.log(error)
            this.$message({
              message: '数据加载失败',
              type: 'warning'
            })
          })
        } else {
          return false
        }
      })
    }

  }
}
</script>
